<div class="flex flex-col py-4 px-4 gap-6 h-96 w-96">
  <div class="flex flex-col gap-10">
    <div class="flex items-center gap-4">
      <p>Shelf Name: </p>
      <input type="text" pInputText [(ngModel)]="shelfName" placeholder="Enter shelf name..."/>
    </div>
    <div class="flex items-center gap-5">
      <p>Shelf Icon:</p>
      @if (!selectedIcon) {
        <div>
          <p-button label="Select Icon" icon="pi pi-search" (onClick)="openIconPicker()"></p-button>
        </div>
      }
      @if (selectedIcon) {
        <div>
          <i [class]="selectedIcon" class="text-xl mr-3"></i>
          <p-button icon="pi pi-times" (onClick)="clearSelectedIcon()" [rounded]="true" [text]="true" [outlined]="true" severity="danger"></p-button>
        </div>
      }
    </div>
  </div>
  <div class="flex justify-end">
    <p-button label="Save" icon="pi pi-check" (onClick)="save()"></p-button>
  </div>
</div>
